<template lang="pug">
  .toolsbar.animated.bounceInRight
    .content
      .top-options
        .item(@click="handleClick(item)", v-for="(item,index) in topMenu", :key="index", :class='["opt-" + item.type_id, {active: item.isActive}]')
          .icon
            i.iconfont(:class="item.icon")
      .avatar
        div(@click='$vgo.emit("openPanoStore")' v-if="isZGViewPano")
          img.hand(:src="getLogo", alt="", style="width: 34px;height: 34px;")
        div(v-else)
          img.hand(:src="getLogo" @click.stop="handleLogo", style="width: 34px;height: 34px;")
        i.collect.iconfont.icon-star(:class='{active: collected}', @click="collect")
      .bottom-options(ref="btOpt", :class='{active: isOpen}')
        .show-all(@click="isOpen = !isOpen", v-if="toolsMenu.length > 4")
          i 〈
        .item(@click="handleClick(item)", v-for="(item,index) in toolsMenu", :key="index", :class='["opt-" + item.type_id, {active: item.isActive}]')
          .icon
            span(v-if="item.type_id == 'barrage'")
            i.iconfont(:class="item.isActive ? item.icon : item.active_icon" v-else)
</template>

<script>
import { filterMenu, handleSystemMenu } from "@/utils/menu";
import { isWxBrowser } from "@/utils";

import { mapGetters } from "vuex";
export default {
  data() {
    return {
      isZGViewPano: $globalconfig.MODULES.ZG_VIEW_PANO,
      isOpen: false,
      isCollection: false,
      baseUrl: $globalconfig.URLS.API,
      logoImage: $globalconfig.LOGO,
      topMenu: [
        {
          type_id: "ticket",
          title: "ticket",
          dis_title: "卡券",
          act_title: "卡券",
          icon: "icon-daijinjuanguanli",
          active_icon: "icon-daijinjuanguanli",
          isActive: false
        },
        {
          type_id: "reward",
          title: "reward",
          dis_title: "打赏",
          act_title: "打赏",
          icon: "icon-dashang",
          active_icon: "icon-dashang",
          isActive: false
        },
        {
          type_id: "carts",
          title: "购物车",
          dis_title: "购物车",
          act_title: "购物车",
          icon: "icon-cart",
          active_icon: "icon-cart",
          isActive: false
        }
      ],
      toolsMenu: [
        {
          type_id: "minimap",
          title: "minimap",
          dis_title: "隐藏地图",
          act_title: "显示地图",
          icon: "icon-ditu1",
          active_icon: "icon-ditu1",
          isActive: false
        },
        {
          type_id: "praise",
          title: "praise",
          dis_title: "点赞",
          act_title: "点赞",
          icon: "icon-dianzan",
          active_icon: "icon-dianzan",
          isActive: false
        },
        {
          type_id: "navmenu",
          title: "navmenu",
          dis_title: "导航菜单",
          act_title: "导航菜单",
          icon: "icon-daohangcaidan1",
          active_icon: "icon-daohangcaidan1",
          isActive: false
        },
        {
          type_id: "bgmusic",
          title: "bgmusic",
          dis_title: "音乐",
          act_title: "音乐",
          icon: "icon-music1",
          active_icon: "icon-jingyin",
          isActive: false,
          display: true
        },
        {
          type_id: "barrage",
          title: "barrage",
          dis_title: "弹幕",
          act_title: "弹幕",
          active_icon: "",
          icon: "",
          isActive: false
        },
        {
          type_id: "say",
          title: "说一说",
          dis_title: "发表说一说",
          act_title: "发表说一说",
          icon: "icon-suoyoupinlun",
          active_icon: "icon-suoyoupinlun",
          isActive: false
        },
        {
          type_id: "vr",
          title: "V  R",
          dis_title: "开启VR",
          act_title: "关闭VR",
          icon: "icon-vr-outline",
          active_icon: "icon-vr-outline",
          isActive: false,
          display: true
        },
        {
          type_id: "rotate",
          title: "rotate",
          dis_title: "旋转",
          act_title: "旋转",
          icon: "icon-xuanzhuan-",
          active_icon: "icon-buxuanzhuan",
          isActive: false,
          display: true
        },
        {
          type_id: "clean",
          title: "clean",
          dis_title: "隐藏评论",
          act_title: "显示评论",
          icon: "icon-zhengyan",
          active_icon: "icon-biyan",
          isActive: false,
          display: true
        },
        {
          type_id: "gyro",
          title: "陀螺仪",
          dis_title: "关闭陀螺仪",
          act_title: "开启陀螺仪",
          icon: "icon-gyro",
          active_icon: "icon-gyro",
          isActive: false
        },
        {
          type_id: "view",
          title: "视角",
          dis_title: "切换视角",
          act_title: "切换视角",
          icon: "icon-view",
          active_icon: "icon-view",
          isActive: false
        },
        {
          type_id: "interaction",
          title: "interaction",
          dis_title: "同屏互动",
          act_title: "同屏互动",
          icon: "icon-gerenzhongxin-hudongfangke-",
          active_icon: "icon-gerenzhongxin-hudongfangke-",
          isActive: false
        }
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      let token = this.$AUTH.getUserCookie('access_token')

      setTimeout(() => {
        if (token) {
          if (this.cartList) {
            this.isShowCart = true
          } else {
            this.$store.dispatch("fetchCartGoods")
          }
        }
      }, 100)
    })
  },
  computed: {
    ...mapGetters([
      "cartList",
      "panoInfo",
      "panoWxCardList",
      "collected",
      "menuData"
    ]),
    getLogo() {
      if (this.panoInfo && this.panoInfo.logo) {
        return this.panoInfo.full_logo_url;
      } else {
        return this.logoImage
      }
    }
  },
  methods: {
    handleLogo() {
      if (this.panoInfo && this.panoInfo.logolink) {
        let url = this.panoInfo.logolink
        if (this.panoInfo.logolink.indexOf('www.') === 0) {
          url = `//${url}`
        }
        // console.log(url)
        window.open(url)
      }
    },
    collect() {
      if (!this.$AUTH.checkLogin()) return
      this.isCollection = !this.isCollection
      this.$store.dispatch("addCollection")
    },
    handleClick(item) {
      if (item.type_id == 'praise' && !this.$AUTH.checkLogin()) return
      item.isActive = !item.isActive
      let praiseCK = this.$AUTH.getCookie('praisecount')
      if (item.type_id == 'praise' && praiseCK) {
        item.isActive = true
      }
      this.$set(item, 'isActive', item.isActive)
      handleSystemMenu(item)
    }
  },
  watch: {
    panoWxCardList: {
      handler(data) {
        if (!isWxBrowser() || (data && data.length == 0)) {
          this.topMenu = this.topMenu.filter(item => item.type_id != "ticket");
        }
      },
      immediate: true
    },
    panoInfo: {
      handler(data) {
        if (data.isds == 2) {
          this.topMenu = this.topMenu.filter(item => item.type_id != "reward");
        }
      },
      immediate: true
    },
    menuData: {
      async handler(data) {
        if (data) {
          this.toolsMenu = await filterMenu(this.toolsMenu);
          // 多排菜单宽度控制
          this.$refs.btOpt.style.width =
            Math.ceil(this.toolsMenu.length / 4) * 50 + "px";
          this.$refs.btOpt.style.right =
            -Math.ceil(this.toolsMenu.length / 4 - 1) * 100 + "%";
        }
      },
      immediate: true
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '../../../assets/styles/color.styl'
@import '../../../assets/styles/mixin.styl'

.toolsbar
  position: absolute
  right: 10px
  top 20px
  z-index: 20
  padding-top 10px
  max-height 100vh
  .content
    width 50px
    text-align center
    .avatar
      width 50px
      height 50px
      position relative
      margin-bottom 20px
      img
        border 1px solid #fff
        width 100%
        box-sizing border-box
        height 100%
        border-radius 50%
      i.collect
        pos-center()
        z-index 99
        font-size 12px
        text-align center
        border-radius 50%
        width 20px
        height 20px
        line-height 20px
        top 100%
        color #fff
        background-color #999
        &.active
          background-color #9c0
    .top-options
      .item
        .icon
          i
            font-size 26px
            text-shadow 0 0 10px rgba(0, 0, 0, 0.3)
        &.opt-ticket
          .icon
            i
              color #9c0
        &.opt-reward
          .icon
            i
              color #F44336
        &.opt-carts
          .icon
            i
              color #ff6417
    .bottom-options
      position absolute
      max-height 170px
      display flex
      flex-direction column
      flex-wrap wrap
      transition all 0.5s cubic-bezier(1, -0.35, 0, 1.31)
      background-color rgba(0, 0, 0, 0.31)
      border-radius 10px
      &.active
        right 0!important
        .show-all
          i
            margin-left 10px
            transform rotateY(180deg)
      .show-all
        position absolute
        top 50%
        height 30px
        line-height 30px
        width 15px
        transform translate(-100%, -50%)
        font-size 14px
        border-radius 50% 0 0 50%
        display flex
        justify-content center
        background-color rgba(0, 0, 0, 0.31)
        color #fff
        i
          margin-left -10px
          font-style normal
          transition all 0.5s
      .item
        width 50px
        height 42px
        justify-content center
        display flex
        align-items center
        line-height 42px
        // &.opt-praise,&.opt-bgmusic,&.opt-rotate,&.opt-gyro,,&.opt-clean
        //   &.active
        //     .icon
        //       i
        //         color #9c0
        .icon
          i
            font-size 26px
            text-shadow 0 0 10px rgba(0, 0, 0, 0.3)
            color #fff
        &.opt-vr,&.opt-view,&.opt-gyro
          .icon
            i
              font-size 32px
        &.opt-barrage
          &.active
            .icon
              span
                right 0px
                transform translateX(0%)
                background-color #9c0
          .icon
            margin 0 auto
            width 28px
            height 18px
            border-radius 9px
            background-color #fff
            position relative
            box-shadow 0 0 10px rgba(0, 0, 0, 0.3)
            span
              position absolute
              right 100%
              transform translateX(100%)
              top 0
              height 100%
              font-size 12px
              line-height 18px
              text-align center
              width 18px
              border-radius 50%
              color #fff
              background-color #999
              transition all 0.38s
</style>
